<template>
  <div class="gis-container">
    <el-card>
      <template #header>
        <div class="card-header">
          <span>地图功能</span>
          <div class="controls">
            <el-button type="primary" @click="addRandomPoints">随机撒点</el-button>
            <el-button type="success" @click="drawPolygon">绘制区块</el-button>
            <el-button type="warning" @click="clearAll">清空图形</el-button>
          </div>
        </div>
      </template>
      <div id="cesiumContainer"></div>
    </el-card>
  </div>
</template>

<script setup>
import { onMounted, onUnmounted, ref } from 'vue'
import * as Cesium from 'cesium'

// 设置Cesium Ion的访问令牌（可选）
// Cesium.Ion.defaultAccessToken = 'your-access-token';

let viewer = null
let pointsEntities = []
let polygonEntities = []

onMounted(() => {
  // 初始化Cesium Viewer
  viewer = new Cesium.Viewer('cesiumContainer', {
    terrainProvider: Cesium.createWorldTerrainAsync(), // 修改为异步方法
    animation: false,
    baseLayerPicker: false,
    fullscreenButton: false,
    vrButton: false,
    geocoder: false,
    homeButton: false,
    infoBox: false,
    sceneModePicker: false,
    selectionIndicator: false,
    timeline: false,
    navigationHelpButton: false,
    navigationInstructionsInitiallyVisible: false,
    scene3DOnly: true,
    shouldAnimate: false,
  })

  // 设置初始视角
  viewer.camera.setView({
    destination: Cesium.Cartesian3.fromDegrees(116.4074, 39.9042, 15000000.0)
  })
})

onUnmounted(() => {
  if (viewer) {
    viewer.destroy()
  }
})

// 随机撒点功能
const addRandomPoints = () => {
  // 清除之前的点
  pointsEntities.forEach(entity => {
    viewer.entities.remove(entity)
  })
  pointsEntities = []

  // 生成随机点数据
  const points = []
  for (let i = 0; i < 50; i++) {
    const longitude = Math.random() * 360 - 180
    const latitude = Math.random() * 180 - 90
    points.push({
      name: `Point ${i + 1}`,
      position: Cesium.Cartesian3.fromDegrees(longitude, latitude),
      description: `经度: ${longitude.toFixed(2)}, 纬度: ${latitude.toFixed(2)}`
    })
  }

  // 添加点到地图
  points.forEach(point => {
    const entity = viewer.entities.add({
      name: point.name,
      position: point.position,
      point: {
        pixelSize: 10,
        color: Cesium.Color.fromRandom({alpha: 0.8}),
        outlineColor: Cesium.Color.WHITE,
        outlineWidth: 2
      },
      label: {
        text: point.name,
        font: '14px sans-serif',
        fillColor: Cesium.Color.WHITE,
        outlineColor: Cesium.Color.BLACK,
        outlineWidth: 2,
        style: Cesium.LabelStyle.FILL_AND_OUTLINE,
        verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
        pixelOffset: new Cesium.Cartesian2(0, -15)
      },
      description: point.description
    })
    pointsEntities.push(entity)
  })

  // 飞行到点集范围
  viewer.flyTo(pointsEntities)
}

// 绘制区块功能
const drawPolygon = () => {
  // 清除之前的多边形
  polygonEntities.forEach(entity => {
    viewer.entities.remove(entity)
  })
  polygonEntities = []

  // 定义几个示例区域
  const polygons = [
    {
      name: '中国区域',
      hierarchy: Cesium.Cartesian3.fromDegreesArray([
        73.5, 53.5,   // 西北角
        135.0, 53.5,  // 东北角
        135.0, 18.0,  // 东南角
        73.5, 18.0    // 西南角
      ]),
      description: '中国区域'
    },
    {
      name: '美国区域',
      hierarchy: Cesium.Cartesian3.fromDegreesArray([
        -125.0, 49.0,  // 西北角
        -66.0, 49.0,   // 东北角
        -66.0, 25.0,   // 东南角
        -125.0, 25.0   // 西南角
      ]),
      description: '美国区域'
    }
  ]

  // 添加多边形到地图
  polygons.forEach(polygon => {
    const entity = viewer.entities.add({
      name: polygon.name,
      polygon: {
        hierarchy: polygon.hierarchy,
        material: Cesium.Color.fromRandom({alpha: 0.5}),
        outline: true,
        outlineColor: Cesium.Color.BLACK,
        outlineWidth: 1
      },
      description: polygon.description
    })
    polygonEntities.push(entity)
  })

  // 飞行到多边形范围
  viewer.flyTo(polygonEntities)
}

// 清空所有图形
const clearAll = () => {
  pointsEntities.forEach(entity => {
    viewer.entities.remove(entity)
  })
  pointsEntities = []

  polygonEntities.forEach(entity => {
    viewer.entities.remove(entity)
  })
  polygonEntities = []
}
</script>

<style scoped>
.gis-container {
  padding: 20px;
  height: 100%;
}

#cesiumContainer {
  width: 100%;
  height: 600px;
  margin: 0;
  padding: 0;
  overflow: hidden;
}

.card-header {
  font-weight: bold;
  font-size: 16px;
  color: #333;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.controls {
  display: flex;
  gap: 10px;
}
</style>